<template>
  <el-checkbox-group v-model="currentValue" @update:modelValue="handleInput">
    <el-col v-for="(item, index) in normalizedOptions" :key="index" :span="item.cols">
      <el-checkbox
        :label="item[model.value]"
        :true-label="item.trueLabel"
        :false-label="item.falseLabel"
        :disabled="item.disabled"
        :border="item.border"
        :size="item.size"
        :name="item.name"
        :checked="item.checked"
        :indeterminate="item.indeterminate"
        v-bind="$attrs"
      />
    </el-col>
  </el-checkbox-group>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref, watch } from "vue";

type CheckboxGroupValueType = (string | number)[];

interface CheckboxOption {
  cols?: number;
  trueLabel?: string | number;
  falseLabel?: string | number;
  disabled?: boolean;
  border?: boolean;
  size?: "large" | "default" | "small";
  name?: string;
  checked?: boolean;
  indeterminate?: boolean;
  [key: string]: any; // Allow other dynamic properties
}

interface ModelConfig {
  label: string;
  value: string;
}

export default defineComponent({
  name: "BaseCheckbox",
  props: {
    modelValue: {
      type: Array as PropType<CheckboxGroupValueType>,
      default: () => [],
    },
    options: {
      type: Array as PropType<CheckboxOption[]>,
      required: true,
      validator: (value: CheckboxOption[]) => Array.isArray(value),
    },
    model: {
      type: Object as PropType<ModelConfig>,
      default: () => ({ label: "label", value: "value" }),
    },
  },
  emits: {
    "update:modelValue": (value: CheckboxGroupValueType) => Array.isArray(value),
  },
  setup(props, { emit }) {
    const currentValue = ref<CheckboxGroupValueType>(props.modelValue as CheckboxGroupValueType);

    const modelConfig = computed<ModelConfig>(() => props.model);

    const normalizedOptions = computed<CheckboxOption[]>(() => {
      return props.options.map((option) => ({
        cols: 24, // Default value
        disabled: false,
        border: false,
        ...option,
      }));
    });

    watch(
      () => props.modelValue,
      (newVal) => {
        currentValue.value = newVal as CheckboxGroupValueType;
      }
    );

    const handleInput = (value: CheckboxGroupValueType) => {
      emit("update:modelValue", value);
    };

    return {
      currentValue,
      model: modelConfig,
      normalizedOptions,
      handleInput,
    };
  },
});
</script>
